<template>
  <div class="setter-wrap">
    <el-button type="primary" class="save-button" @click="handleSubmit">保存</el-button>
    <el-divider></el-divider>
    <el-table :data="tableData" :border="true"  style="width: 100%">
      <el-table-column label="参数编码" prop="code">
        <template slot-scope="scope">
          <el-input v-model="scope.row.code" class="input" size="medium"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="参数名称" prop="name">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" class="input" size="medium"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="参数类型" prop="type">
        <template slot-scope="scope">
          <el-select v-model="scope.row.type" placeholder="请选择" size="medium">
            <el-option label="string" value="string"></el-option>
            <el-option label="number" value="number"></el-option>
            <el-option label="boolean" value="boolean"></el-option>
            <el-option label="date" value="date"></el-option>
            <el-option label="time" value="time"></el-option>
            <el-option label="array" value="array"></el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <el-link type="primary" :underline="false" class="add-button" @click="addCustom">
      <i class="el-icon-circle-plus-outline"></i>
      添加自定义参数
    </el-link>
  </div>
</template>

<script>
import {saveOrUpdate, getByBelongNodeId} from '@/api/requestParameter'

export default {
  props: {
    lf: Object,
    context: Object,
    current: Object,
    currentData: Object,
    value: [String, Number, Boolean, Object, Array]
  },
  data() {
    return {
      tableData: []
    }
  },

  mounted() {
    this.getData();
  },

  methods: {
    handleSubmit() {
      this.tableData.forEach((item) => {
        item.belongNodeId = this.currentData.id
      });
      const arrangeId = window.localStorage.getItem('arrangeId')
      saveOrUpdate(JSON.stringify(this.tableData), arrangeId).then(res =>{
        if (res.code === '0') {
          this.$message.success('保存成功');
        } else {
          this.$message.error('保存失败');
        }
      });
    },

    getData() {
      getByBelongNodeId(this.currentData.id).then(res => {
        if (res.code === '0') {
          this.tableData = res.data
        }
      })
    },
    addCustom() {
      const item = {
        code: '',
        name: '',
        required: 0,
        type: 'string'
      }
      this.tableData.push(item)
    }
  }
}
</script>

<style scoped lang="less">
.setter-wrap {
  background: #f3f6fa;
  border-radius: 4px;
  font-size: 12px;
  color: #303a51;
  line-height: 16px;
  font-weight: 400;
  padding: 9px 12px;
}
.label {
  margin-right: 10px;
}
.input {
  width: 90%;
}
.tip {
  color: #a0a1a5;
  margin-top: 8px;
}
.add-button {
  margin-top: 10px;
}
.save-button {
  margin-left: 85%;
}
</style>
